<script setup>
import { ref, reactive, onMounted, inject } from "vue"
import copyw from "@/components/copy.vue"
import useClipboard from "vue-clipboard3"
import { message } from "ant-design-vue"
const globalVars = inject("globalVars")
const { toClipboard } = useClipboard()
const state = reactive({
    sourceValue: "",
    encodeData: "",
    decodeData: "",
    checked: true,
})

const copy = async (msg) => {
    try {
        // 复制
        await toClipboard(msg)
        message.success("复制成功")
        // 复制成功
    } catch (e) {
        // 复制失败
    }
}

function uencode() {
    let v = encodeURIComponent(state.sourceValue)
    if (state.checked) {
        state.encodeData = v
            .replace(/!/g, "%21")
            .replace(/'/g, "%27")
            .replace(/\(/g, "%28")
            .replace(/\)/g, "%29")
            .replace(/\*/g, "%2A")
            .replace(/~/g, "%7E")
            .replace(/%20/g, "+")
        return
    }

    state.encodeData = v
}

function udecode() {
    let v = state.sourceValue
    if (state.checked) {
        v = v.replace(/\+/g, "%20")
    }
    state.decodeData = decodeURIComponent(v)
}
function change() {
    localStorage.setItem(globalVars.activeKey, state.sourceValue)
    if (state.sourceValue === "") {
        state.encodeData = ""
        state.decodeData = ""
        return
    }
    udecode()
    uencode()
}

onMounted(() => {
    let c = localStorage.getItem(globalVars.activeKey)
    if (c) {
        state.sourceValue = c
    }
    change()
})
</script>

<template>
    <div class="k">
        <div class="content f_col">
            <h1 class="f_row" style="justify-content: flex-start">
                URl格式转换<copyw title="URl格式转换" ckey="dourl"></copyw>
            </h1>

            <div style="width: 100%">
                <div class="f_row" style="justify-content: flex-start">
                    <h3>源码</h3>
                    <a-checkbox
                        v-model:checked="state.checked"
                        style="margin-left: 8px; margin-bottom: 8px; cursor: pointer; color: var(--character-85)"
                        @change="change"
                        >需替换英文的~!*()+</a-checkbox
                    >
                </div>

                <a-textarea
                    class="kuang"
                    v-model:value="state.sourceValue"
                    allow-clear
                    show-count
                    placeholder="原码"
                    :auto-size="{ minRows: 6, maxRows: 15 }"
                    @change="change"
                />
            </div>
            <div style="width: 100%">
                <div class="f_row" style="justify-content: flex-start">
                    <h3>编码</h3>
                    <a style="margin-bottom: 8px; margin-left: 12px; cursor: pointer" @click="copy(state.encodeData)"
                        >复制</a
                    >
                </div>
                <div v-text="state.encodeData" class="auto-wrap" style="width: 100%"></div>
            </div>
            <div style="width: 100%">
                <div class="f_row" style="justify-content: flex-start">
                    <h3>解码</h3>
                    <a style="margin-bottom: 8px; margin-left: 12px; cursor: pointer" @click="copy(state.decodeData)"
                        >复制</a
                    >
                </div>

                <div v-text="state.decodeData" class="auto-wrap" style="width: 100%"></div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.content {
    max-width: 860px;
    margin: 0 auto;
    padding: 32px;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
    min-height: calc(100vh - 66px);
    justify-content: flex-start;
    background-color: var(--Neutral-12);
    border-radius: 12px;
    border: 1px solid var(--Neutral-10);
}

:where(.k) {
    background-color: var(--page-bg-color);
    height: 100%;
    padding: 16px;
}

.auto-wrap {
    background-color: var(--Neutral-11);
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid var(--Neutral-10);
    color: var(--character-85);
    min-height: 48px;
}

h1 {
    color: var(--character-85);
    font-size: 24px;
    margin-bottom: 8px;
}

h3 {
    color: var(--character-75);
    font-size: 16px;
    margin-bottom: 8px;
}

a {
    color: var(--Geek-Blue-5);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--Geek-Blue-4);
}

:deep(.ant-textarea) {
    background-color: var(--Neutral-11) !important;
    border: 1px solid var(--Neutral-10) !important;
    color: var(--character-85) !important;
    border-radius: 8px;
    transition: all 0.3s ease;
}

:deep(.ant-textarea:hover) {
    border-color: var(--Neutral-9) !important;
}

:deep(.ant-textarea:focus) {
    border-color: var(--Neutral-8) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05);
}
</style>
